<%var jstpl = {%>
<script src="${basepath}/plugin/qn_jssdk/plupload/plupload.full.min.js"></script>
<script src="${basepath}/plugin/qn_jssdk/qiniu.dev.js"></script>
<script>
    $(function() {
        $("#gexin_body").on("click", ".toggle-btn", function() {
            var id = $(this).data("id");
            $(this).find(".layui-icon").toggleClass("show_sub");
            $("tr[data-sub='" + id + "']").toggle();
        })
    })
</script>
<%};%>
<%var csstpl = {%>
<style type="text/css">
    .icons-list i {
        cursor: pointer;
    }

    .toggle-btn {
        cursor: pointer;
    }

    .hide_sub:before {
        content: "\e602";
    }

    .show_sub:before {
        content: "\e61a";
    }

</style>
<%};%>

<%layout("../layout/_layout_layui.html",{title:'商品类型管理',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="layui-row">
    <form class="layui-form" method="post" action="/system/product/types" role="form">
        <div class="layui-col-md8">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="types.type_name" value="${types.type_name!}" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-input-inline">
                    <select name="types.state" >
                        <option value=""  ${(types.state!)==null?'selected':''}>请选择状态</option>
                        <option value="0" ${(types.state!)==0?'selected':''}>启用</option>
                        <option value="1" ${(types.state!)==1?'selected':''}>禁用</option>
                    </select>
                </div>

            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-form-item">
                <button type="submit" class="layui-btn">
                    <i class="layui-icon">&#xe615;</i> 查询/筛选

                </button>
                <a href="javascript:;" class="layui-btn layui-btn-normal add_one">
                    <i class="layui-icon">&#xe608;</i> 添加商品类型
                </a>
            </div>
        </div>

        <table class="layui-table">
            <thead>
            <tr>
                <th>类型名称</th>
                <th>显示范围</th>
                <th>排序</th>
                <!--<th>级别</th>-->
                <th style="width: 60px;">状态</th>
                <th>描述文字</th>
                <th>标志图片</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>

            <%for(obj in data.list!){ %>
            <tbody>
            <tr>
                <%if(!isEmpty(obj.list1)){%>
                <td class="toggle-btn" data-id="${obj.id!}"><i class="layui-icon  hide_sub" ></i>
                    <i style="display: none;" class="layui-icon">&#xe619;</i>${obj.type_name!}</td>
                <%}else{%>
                <td>${obj.type_name!}</td>
                <%}%>
                <td>${obj.show_type_name!}</td>
                <td>${obj.sort!}</td>
                <!--<td>
                    <% if (obj.level==1){ %>
                    <span class="">一级</span>
                    <% }else {%>
                    <span class="">二级</span>
                    <% }%>
                </td>-->
                <td style="width: 60px;">
                    <%if(obj.state==0){%>
                    <span class="layui-badge layui-bg-green">启用</span>
                    <%}else{%>
                    <span class="layui-badge layui-bg-red">禁用</span>
                    <%}%>
                </td>
                <td>${obj.type_desc!}</td>
                <%if(obj.image!=null && obj.image!=''){%>
                <td><img src="${obj.image!}?imageView2/1/w/150/h/80" ></td>
                <%}else{%>
                <td></td>
                <%}%>
                <td>${obj.createtime,'yyyy-MM-dd HH:mm:ss'}</td>
                <td class="action-col">
                    <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-primary layui-btn-sm" onclick="update(${obj.id!})"><i class="layui-icon">&#xe642;</i> 编辑</a>
                        <%if(obj.state==1){%>
                        <a href="javascript:;" data-id="${obj.id!}" data-state="0" class="layui-btn layui-btn-primary layui-btn-sm upd" ><i class="layui-icon">&#xe605;</i>启用</a>
                        <%}else if(obj.state==0){%>
                        <a href="javascript:;" data-id="${obj.id!}" data-state="1" class="layui-btn layui-btn-primary layui-btn-sm upd"><i class="layui-icon">&#x1006;</i>禁用</a>
                        <%}%>
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm add_two" data-pid="${obj.id!}">
                            <i class="layui-icon">&#xe608;</i> 添加二级
                        </a>
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm del_btn" data-id="${obj.id!}">删除</a>
                        <!-- <a href="/system/client/secondary?client_id=${obj.id!}" class="layui-btn layui-btn-primary layui-btn-sm">查看二级客户</a>-->

                    </div>
                </td>
            </tr>
            <%for(d in obj.list1!){%>
            <tr data-sub="${obj.id!}" style="display: none;">
                <td>${d.type_name!}</td>
                <td>${obj.corp_name!}</td>
                <td>${d.sort!}</td>
                <!--<td>
                    <% if (d.level==1){ %>
                    <span class="">一级</span>
                    <% }else {%>
                    <span class="">二级</span>
                    <% }%>
                </td>-->
                <td>
                    <% if (d.state==0){ %>
                    <span class="layui-badge layui-bg-green">启用</span>
                    <% }else {%>
                    <span class="layui-badge layui-bg-red">禁用</span>
                    <% }%>
                </td>
                <td>${d.type_desc!}</td>
                <td></td>
                <td>${d.createtime,'yyyy-MM-dd HH:mm:ss'}</td>
                <td class="action-col">
                    <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-primary layui-btn-sm" onclick="update(${d.id!})"><i class="layui-icon">&#xe642;</i> 编辑</a>
                        <%if(d.state==1){%>
                        <a href="javascript:;" data-id="${d.id!}" data-state="0" class="layui-btn layui-btn-primary layui-btn-sm upd" ><i class="layui-icon">&#xe605;</i>启用</a>
                        <%}else if(d.state==0){%>
                        <a href="javascript:;" data-id="${d.id!}" data-state="1" class="layui-btn layui-btn-primary layui-btn-sm upd"><i class="layui-icon">&#x1006;</i>禁用</a>
                        <%}%>
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm del_btn" data-id="${d.id!}">删除</a>

                    </div>
                </td>
            </tr>
            <%}%>
            </tbody>
            <%}elsefor{%>
            <tbody>
                <tr>
                    <td  colspan="10" style="text-align:center;height:200px"><h1>没有数据</h1></td>
                </tr>
            </tbody>
            <%}%>
        </table>
        <%include("/jsp/_paginate.html"){}%>
    </form>
</div>

<!-- 弹出框开始  -->
<div class="modal fade" id="product" tabindex="-1" role="dialog" aria-hidden="true">
    <form id="add_saveform" class="layui-form form-horizontal ">
        <input type="hidden" id="id" name="types.id">
        <input type="hidden" id="pid" name="types.pid" >


        <!--<input type="hidden" id="img" name="types.image" >-->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        商品类型管理
                    </h4>
                </div>
                <div class="modal-body">
                    <!-- 弹出框开始  -->

                    <div class="layui-form-item">
                        <label class="layui-form-label">类型名称</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" lay-verify="required" placeholder="请输入类型名称" id="name" name="types.type_name" />
                        </div>
                    </div>

                    <!--<div class="layui-form-item">
                        <label class="layui-form-label">品牌ID</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" lay-verify="required" placeholder="请输入品牌ID" id="shop" name="types.shop_id" />
                        </div>
                    </div>-->

                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" lay-verify="required" placeholder="请输入排序" id="paixu" name="types.sort" />
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">描述文字</label>
                        <div class="layui-input-block ">
                            <textarea class="layui-textarea" placeholder="请填入描述文字（必填）" maxlength="255" lay-verify="required" id="desc" name="types.type_desc" >${types.type_desc}</textarea>

                        </div>
                    </div>

                    <div class="layui-form-item img">
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-inline">
                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img " src="" id="logo">
                                    <p id="demoText"></p>
                                </div>
                                <input type="hidden" name="types.image" >
                                <button type="button" class="layui-btn" id="logo_upload">上传图片</button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item" id="xsfw">
                        <label class="layui-form-label">显示范围</label>
                        <div class="layui-input-block">
                            <input type="checkbox" value="1" checked  title="在售商品" name="show_type_1" id="show_type_1" lay-skin="primary" >
                            <input type="checkbox" value="2"  title="敬请期待" name="show_type_2" id="show_type_2" lay-skin="primary" >
                            <input type="checkbox" value="3"  title="其他位置" name="show_type_integral" id="show_type_integral" lay-skin="primary" >
                        </div>
                    </div>

                    <!--  弹出框结束 -->
                </div>
                <div class="modal-footer">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                            <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</div>
<!--  弹出框结束 -->

<script >
    //查询  筛选
    $(function() {
        $("#select_btn").on("click", function () {
            $("#pageNumber").val(1);
            $("#data_form").submit();
        })

        //添加一级
        $(".add_one").click(function () {
            $("#product #show_type_1").prop("checked", true);
            $("#product #show_type_2").prop("checked", false);
            $("#product #show_type_integral").prop("checked", false);
            $("#xsfw").show();
            layui.form.render();
            $("#product").modal("show");
        })

        //添加二级
        $(".add_two").click(function () {
            var pid = $(this).data("pid");
            $("#pid").val(pid);

            $(".img").hide();//添加二级不要上传图片  这是隐藏
            $("#xsfw").hide();
            $("#product").modal("show");
        })


        $('#product').on('hide.bs.modal', function () {
            //当调用 hide 实例方法时触发。 执行一些动作...
            $("#id").val("");
            $("#pid").val("");
            $("#name").val("");
            $("#shop").val("");
            $("#paixu").val("");
            $("#lev").val("");
            $("#desc").val("");
            $("#logo").attr("src","");
            $("input[name='types.image']").val("");
            $("#product #show_type_1").prop("checked", true);
            $("#product #show_type_2").prop("checked", false);
            $("#product #show_type_integral").prop("checked",false);
            /*$(".img").hide();*/
            $(".img").show();
            layui.form.render();

        })

        //上传图片
        imgupload({
            elm : "#logo_upload",		// 标签，类名或 ID 不能重复
            thumb_w : 200,		// 返回缩略图的宽度
            thumb_h : 80,		// 返回缩略图的高度
            fsize : 1.5,			// 图片大小限制（MB），默认 100MB
            rery : 3,			// 上传失败重试次数，默认 1
            multi : false,		// 上传多张
            UploadProgress : function(up,file){ },		// up：对象实例，file：文件上传信息
            FileUploaded : function(img,thumb){
                $("#logo").attr("src",thumb);
                $("input[name='types.image']").val(img);
            }	// img：图片原图，thumb：缩略图
        });
    })

    $(function(){
        form = layui.form;
        //监听提交数据
        form.on('submit(formDemo)', function(data){
            //浏览器控制台打印form表单参数
            console.log(data.field);
            //ajax提交数据
            Ajax("/system/product/types/save",data.field,function (ret) {
                if (ret.state){//state==true时，表明添加成功
                    //前端进行页面跳转
                    location.href="/system/product/types";

                } else {//添加失败的信息
                    //浏览器弹出后台传过来的失败原因
                    layer.msg(ret.msg);
                }
            })
            return false;
        });


    })

    /*//删除
    function del(id) {
        gx.confirm("确认删除此条数据？", function() {
            Ajax("/system/product/types/del/" + id, function(ret) {
                if(ret.state){
                    //前端刷新页面
                    location.reload();
                }else{
                    layer.msg(ret.msg);
                }
            })
        })
    }*/
    //启用和禁用
    $(".upd").click(function () {
        var id = $(this).data("id");
        var state = $(this).data("state");
        layer.confirm("确认操作？",function () {

            //不传单独参数 ，参数在url中
            Ajax("/system/product/types/updState/"+id+"?state="+state,   function (ret) {
                if(ret.state){
                    //前端刷新页面
                    location.reload();
                }else{
                    layer.msg(ret.msg);
                }

            })
        })
    })
    
    //删除
    $(".del_btn").on("click",function () {
        var id =$(this).data("id");
        gx.confirm("此操作可不撤销，您是否继续此操作？",function () {
            Ajax("/system/product/types/delType",{'id':id},function (ret) {
                if(ret.state){
                    //前端刷新页面
                    location.reload();
                }else{
                    gx.alert(ret.msg);
                }
            })
        })
    })

    //编辑   回填
    function update(id) {
        Ajax('/system/product/types/info?id=' + id, function(d) {
            $("#id").val(d.id);
            $("#pid").val(d.pid);
            $("#name").val(d.type_name);
            $("#shop").val(d.shop_id);
            $("#paixu").val(d.sort);
            $("#lev").val(d.level);
            $("#desc").val(d.type_desc);
            if(d.image!=null && d.image!=''){
                $("#logo").attr("src",d.image+"?imageView2/1/w/92/h/92");
            }else{
                $("#logo").attr("src","");
            }
            $("input[name='types.image']").val(d.image);
//            $("input[class=zhiwei][value=" + d.position_type + "]").attr("checked", "checked");
            for(var i =0;i<d.show_list.length;i++){
                var idx=d.show_list[i];
                console.log(idx)
                if(idx==1 || idx=="1"){
                    $("#product #show_type_1").prop("checked", true);
                }else if(idx==2 || idx=="2"){
                    $("#product #show_type_2").prop("checked", true);
                }
            }
            if(d.show_list.length<=0){
                $("#product #show_type_1").prop("checked", false);
                $("#product #show_type_2").prop("checked", false);
            }
            $("input[class=state][value=" + d.state + "]").attr("checked", "checked");

            // form.render("radio");
            layui.form.render();
            //这里是jquery判断 弹窗
            var pid = d.pid;
            console.info(d.pid)
            if(pid==0){
                $(".img").show();
                $("#xsfw").show();
            }else {
                $(".img").hide()
                $("#xsfw").hide();
            }
            $('#product').modal('show');
        })
    }


</script>


<%}%>